import './index.scss';
import { Card, } from 'antd-mobile'
import { DownOutline, UpOutline } from 'antd-mobile-icons'
import { useEffect, useMemo, useState } from 'react';
import { DatePicker } from 'antd-mobile'
import dayjs from 'dayjs';
import { useSelector } from 'react-redux';
import _ from 'lodash'
const Month = () => {
    const [show, setShow] = useState(false)
    const [timeData, setTimeData] = useState({ year: '2024', month: '8' })


    const [itemList, setItemList] = useState([
        { name: '支出', value: '0.00', type: 'pay' },
        { name: '收入', value: '0.00', type: 'income' },
        { name: '结余', value: '0.00', type: 'total' },
    ])
    const selTime = time => {
        console.log(time);
        let timeStr = dayjs(time).format('YYYY-MM')
        let arr = timeStr.split('-')
        setTimeData({ year: arr[0], month: arr[1] })
        let currentDate = billsListGroup[timeStr]  ||[]
        console.log(currentDate, timeStr);

        let pay = currentDate.filter(item => item.type === 'pay').reduce((prev, item) => prev + Number(item.money), 0)
        let income = currentDate.filter(item => item.type === 'income').reduce((prev, item) => prev + Number(item.money), 0)
        let total = pay + income
        console.log(pay, income, total);

        let list = itemList.map(item => {
            if (item.type === 'pay') {
                item.value = pay
            }
            if (item.type === 'income') {
                item.value = income
            }
            if (item.type === 'total') {
                item.value = total
            }
            return item
        })
        setItemList(list)
    }

    const { billsList } = useSelector(state => state.bill)
    const billsListGroup = useMemo(() => {
        return _.groupBy(billsList, item => dayjs(item.date).format('YYYY-MM')) || {}

    }, [billsList])
    useEffect(() => {
        if (billsListGroup) {
            selTime(dayjs().format('YYYY-MM'))
        }
       
    }, [billsListGroup])

    return (
        <div className='month'>
            <h3 className='title'>月度收支</h3>
            <Card bodyClassName={'card'}>
                <div className='count-box'>
                    <div className='title-time-box'>
                        <span>{timeData.year}年</span>
                        <span className='line'></span>
                        <span>{timeData.month}月账单</span>
                        <span onClick={() => {
                            setShow(true)
                        }}> {show ? <DownOutline /> : <UpOutline />}</span>

                    </div>
                    <div className='countdetail'>
                        {
                            itemList.map(item => (
                                <div className='countdetail-item'
                                    key={item.type}>
                                    <span>{item.value}</span>
                                    <span>{item.name}</span>
                                </div>
                            ))
                        }


                    </div>
                </div>
            </Card>
            
            <DatePicker
                mouseWheel
                visible={show}
                onClose={() => { setShow(false) }}
                precision='month'
                onConfirm={val => { selTime(val) }}
            />
        </div>
    )
}
export default Month;